<template>
  <div class="media-share-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-info">
          <h1 class="page-title">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
              <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
            </svg>
            媒体分享与权限
          </h1>
          <p class="page-description">管理媒体文件的分享链接、权限设置和家庭成员访问</p>
        </div>
        <div class="header-actions">
          <button class="btn btn-secondary" @click="showPermissionManager = true">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2"/>
            </svg>
            权限管理
          </button>
          <button class="btn btn-primary" @click="openCreateShare">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="5" y2="19"/>
              <line stroke="currentColor" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
            </svg>
            创建分享
          </button>
        </div>
      </div>
    </div>

    <!-- 分享统计概览 -->
    <div class="share-overview glass-card">
      <div class="overview-grid">
        <div class="overview-item">
          <div class="overview-icon shares">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
              <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
            </svg>
          </div>
          <div class="overview-content">
            <h3>活跃分享</h3>
            <div class="overview-value">{{ shareStats.activeShares }}</div>
            <div class="overview-change positive">+{{ shareStats.newSharesThisWeek }} 本周</div>
          </div>
        </div>

        <div class="overview-item">
          <div class="overview-icon views">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="overview-content">
            <h3>总浏览量</h3>
            <div class="overview-value">{{ shareStats.totalViews.toLocaleString() }}</div>
            <div class="overview-change positive">+{{ shareStats.viewsThisWeek }} 本周</div>
          </div>
        </div>

        <div class="overview-item">
          <div class="overview-icon downloads">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="overview-content">
            <h3>下载次数</h3>
            <div class="overview-value">{{ shareStats.totalDownloads.toLocaleString() }}</div>
            <div class="overview-change neutral">{{ shareStats.downloadsThisWeek }} 本周</div>
          </div>
        </div>

        <div class="overview-item">
          <div class="overview-icon members">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="overview-content">
            <h3>家庭成员</h3>
            <div class="overview-value">{{ familyMembers.length }}</div>
            <div class="overview-change neutral">{{ familyStats.activeMembers }} 活跃</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="content-grid">
        <!-- 左侧：分享链接管理 -->
        <div class="shares-section">
          <!-- 分享过滤器 -->
          <div class="share-filters glass-card">
            <div class="filters-row">
              <div class="filter-group">
                <label>状态筛选</label>
                <select v-model="shareFilter.status" @change="loadShares">
                  <option value="">全部状态</option>
                  <option value="active">活跃中</option>
                  <option value="expired">已过期</option>
                  <option value="disabled">已禁用</option>
                </select>
              </div>
              <div class="filter-group">
                <label>类型筛选</label>
                <select v-model="shareFilter.type" @change="loadShares">
                  <option value="">全部类型</option>
                  <option value="public">公开分享</option>
                  <option value="private">私密分享</option>
                  <option value="family">家庭分享</option>
                </select>
              </div>
              <div class="filter-group">
                <label>排序方式</label>
                <select v-model="shareFilter.sortBy" @change="loadShares">
                  <option value="createTime">创建时间</option>
                  <option value="viewCount">浏览次数</option>
                  <option value="downloadCount">下载次数</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 分享链接列表 -->
          <div class="share-list glass-card">
            <div class="card-header">
              <h3>我的分享链接</h3>
              <button class="btn btn-text" @click="loadShares">
                <svg fill="none" viewBox="0 0 24 24">
                  <polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2"/>
                  <polyline points="1 20 1 14 7 14" stroke="currentColor" stroke-width="2"/>
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2"/>
                </svg>
                刷新
              </button>
            </div>
            <div class="card-content">
              <div class="share-items">
                <div
                  v-for="share in shareList"
                  :key="share.id"
                  :class="{ expired: isExpired(share.expireTime) }"
                  class="share-item"
                >
                  <div class="share-preview">
                    <div class="media-thumbnails">
                      <div
                        v-for="(media, index) in getPreviewMedia(share)"
                        :key="media.id"
                        :style="{ zIndex: 10 - index }"
                        class="thumbnail"
                      >
                        <img :alt="media.name" :src="media.thumbnail" />
                      </div>
                      <div v-if="share.mediaIds.length > 3" class="more-count">
                        +{{ share.mediaIds.length - 3 }}
                      </div>
                    </div>
                  </div>

                  <div class="share-info">
                    <h4 class="share-title">{{ share.title }}</h4>
                    <div class="share-meta">
                      <span :class="share.shareType" class="share-type">
                        <svg v-if="share.shareType === 'public'" fill="none" viewBox="0 0 24 24">
                          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                          <path d="M2 12h20" stroke="currentColor" stroke-width="2"/>
                          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        <svg v-else-if="share.shareType === 'private'" fill="none" viewBox="0 0 24 24">
                          <rect height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="11"/>
                          <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
                          <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        <svg v-else fill="none" viewBox="0 0 24 24">
                          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                          <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        {{ getShareTypeText(share.shareType) }}
                      </span>
                      <span class="share-date">{{ formatDate(share.createTime) }}</span>
                      <span v-if="share.expireTime" class="share-expire">
                        {{ isExpired(share.expireTime) ? '已过期' : '剩余' + getTimeRemaining(share.expireTime) }}
                      </span>
                    </div>
                    <div class="share-stats">
                      <span class="stat-item">
                        <svg fill="none" viewBox="0 0 24 24">
                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        {{ share.statistics.viewCount }}
                      </span>
                      <span class="stat-item">
                        <svg fill="none" viewBox="0 0 24 24">
                          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        {{ share.statistics.downloadCount }}
                      </span>
                      <span class="stat-item">
                        <svg fill="none" viewBox="0 0 24 24">
                          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        {{ share.statistics.commentCount }}
                      </span>
                    </div>
                  </div>

                  <div class="share-actions">
                    <button class="action-btn copy" title="复制链接" @click="copyShareLink(share)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <rect height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="13" x="9" y="9"/>
                        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                    <button class="action-btn edit" title="编辑分享" @click="editShare(share)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                    <button class="action-btn stats" title="查看统计" @click="viewShareStats(share)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M18 20V10M12 20V4M6 20v-6" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                    <button
                      :class="{ disabled: !share.isEnabled }"
                      :title="share.isEnabled ? '禁用分享' : '启用分享'"
                      class="action-btn toggle"
                      @click="toggleShare(share)"
                    >
                      <svg v-if="share.isEnabled" fill="none" viewBox="0 0 24 24">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      <svg v-else fill="none" viewBox="0 0 24 24">
                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" stroke="currentColor" stroke-width="2"/>
                        <line stroke="currentColor" stroke-width="2" x1="1" x2="23" y1="1" y2="23"/>
                      </svg>
                    </button>
                    <button class="action-btn delete" title="删除分享" @click="deleteShare(share)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                        <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                  </div>
                </div>

                <div v-if="shareList.length === 0" class="empty-state">
                  <div class="empty-icon">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
                      <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                      <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
                      <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
                      <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
                    </svg>
                  </div>
                  <h3>暂无分享链接</h3>
                  <p>点击"创建分享"按钮来分享您的媒体文件</p>
                  <button class="btn btn-primary" @click="openCreateShare">
                    创建第一个分享
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：家庭成员管理 -->
        <div class="members-section">
          <!-- 访问请求 -->
          <div v-if="accessRequests.length > 0" class="access-requests glass-card">
            <div class="card-header">
              <h3>访问请求</h3>
              <span class="request-count">{{ accessRequests.length }}</span>
            </div>
            <div class="card-content">
              <div class="request-list">
                <div
                  v-for="request in accessRequests"
                  :key="request.id"
                  class="request-item"
                >
                  <div class="request-avatar">
                    <img
                      v-if="request.requesterAvatar"
                      :alt="request.requesterName"
                      :src="request.requesterAvatar"
                    />
                    <div v-else class="default-avatar">
                      {{ request.requesterName.charAt(0) }}
                    </div>
                  </div>
                  <div class="request-info">
                    <div class="request-name">{{ request.requesterName }}</div>
                    <div class="request-media">请求访问：{{ request.mediaTitle }}</div>
                    <div class="request-time">{{ formatDate(request.createTime) }}</div>
                  </div>
                  <div class="request-actions">
                    <button class="btn btn-success btn-sm" @click="approveRequest(request)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                    <button class="btn btn-danger btn-sm" @click="rejectRequest(request)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                        <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 家庭成员列表 -->
          <div class="family-members glass-card">
            <div class="card-header">
              <h3>家庭成员</h3>
              <button class="btn btn-text" @click="showInviteModal = true">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="22" x2="16" y1="11" y2="11"/>
                  <line stroke="currentColor" stroke-width="2" x1="19" x2="19" y1="8" y2="14"/>
                </svg>
                邀请成员
              </button>
            </div>
            <div class="card-content">
              <div class="members-list">
                <div
                  v-for="member in familyMembers"
                  :key="member.id"
                  class="member-item"
                >
                  <div class="member-avatar">
                    <img
                      v-if="member.avatar"
                      :alt="member.name"
                      :src="member.avatar"
                    />
                    <div v-else class="default-avatar">
                      {{ member.name.charAt(0) }}
                    </div>
                    <div :class="{ online: isOnline(member) }" class="member-status"></div>
                  </div>
                  <div class="member-info">
                    <div class="member-name">{{ member.name }}</div>
                    <div :class="member.role" class="member-role">{{ getRoleText(member.role) }}</div>
                    <div class="member-permissions">
                      <span v-if="member.permissions.canUpload" class="permission-tag">上传</span>
                      <span v-if="member.permissions.canDownload" class="permission-tag">下载</span>
                      <span v-if="member.permissions.canShare" class="permission-tag">分享</span>
                    </div>
                  </div>
                  <div class="member-actions">
                    <button
                      class="action-btn"
                      title="编辑权限"
                      @click="editMemberPermissions(member)"
                    >
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                    <button
                      v-if="member.role !== 'admin'"
                      class="action-btn delete"
                      title="移除成员"
                      @click="removeMember(member)"
                    >
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="currentColor" stroke-width="2"/>
                        <line stroke="currentColor" stroke-width="2" x1="10" x2="10" y1="11" y2="17"/>
                        <line stroke="currentColor" stroke-width="2" x1="14" x2="14" y1="11" y2="17"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分享统计 -->
          <div class="share-analytics glass-card">
            <div class="card-header">
              <h3>分享分析</h3>
              <select v-model="analyticsTimeRange" @change="loadAnalytics">
                <option value="7d">最近7天</option>
                <option value="30d">最近30天</option>
                <option value="90d">最近90天</option>
              </select>
            </div>
            <div class="card-content">
              <div class="analytics-metrics">
                <div class="metric-item">
                  <div class="metric-label">平均访问量</div>
                  <div class="metric-value">{{ Math.round(analytics.avgViews) }}</div>
                </div>
                <div class="metric-item">
                  <div class="metric-label">最受欢迎</div>
                  <div class="metric-value">{{ analytics.topShareType }}</div>
                </div>
                <div class="metric-item">
                  <div class="metric-label">转化率</div>
                  <div class="metric-value">{{ (analytics.conversionRate * 100).toFixed(1) }}%</div>
                </div>
              </div>
              <div class="analytics-chart">
                <div class="chart-placeholder">
                  <p>图表组件开发中...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建分享对话框 -->
    <div v-if="showCreateShareModal" class="create-share-modal" @click="closeCreateShareModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>创建分享链接</h3>
          <button class="modal-close" @click="closeCreateShareModal">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <CreateShareForm
            v-if="showCreateShareModal"
            :selectedMedia="selectedMediaForShare"
            @cancel="closeCreateShareModal"
            @created="onShareCreated"
          />
        </div>
      </div>
    </div>

    <!-- 权限管理对话框 -->
    <div v-if="showPermissionManager" class="permission-modal" @click="closePermissionModal">
      <div class="modal-content large" @click.stop>
        <div class="modal-header">
          <h3>权限管理器</h3>
          <button class="modal-close" @click="closePermissionModal">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <PermissionManager
            v-if="showPermissionManager"
            @close="closePermissionModal"
          />
        </div>
      </div>
    </div>

    <!-- 邀请成员对话框 -->
    <div v-if="showInviteModal" class="invite-modal" @click="closeInviteModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>邀请家庭成员</h3>
          <button class="modal-close" @click="closeInviteModal">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <InviteMemberForm
            v-if="showInviteModal"
            @cancel="closeInviteModal"
            @invited="onMemberInvited"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@opentiny/vue'
import {
  getMyShares,
  deleteShareLink,
  updateShareSettings,
  getFamilyMembers,
  getAccessRequests,
  approveAccess,
  rejectAccess,
  removeFamilyMember
} from '@/api/share'
import CreateShareForm from '@/components/share/CreateShareForm.vue'
import PermissionManager from '@/components/share/PermissionManager.vue'
import InviteMemberForm from '@/components/share/InviteMemberForm.vue'

const router = useRouter()

// 响应式数据
const showCreateShareModal = ref(false)
const showPermissionManager = ref(false)
const showInviteModal = ref(false)
const selectedMediaForShare = ref<any[]>([])
const analyticsTimeRange = ref('30d')

// 筛选条件
const shareFilter = reactive({
  status: '',
  type: '',
  sortBy: 'createTime'
})

// 数据状态
const shareList = ref<any[]>([])
const familyMembers = ref<any[]>([])
const accessRequests = ref<any[]>([])

// 统计数据
const shareStats = ref({
  activeShares: 12,
  newSharesThisWeek: 3,
  totalViews: 2847,
  viewsThisWeek: 156,
  totalDownloads: 423,
  downloadsThisWeek: 28
})

const familyStats = ref({
  activeMembers: 4
})

const analytics = ref({
  avgViews: 237.3,
  topShareType: '家庭分享',
  conversionRate: 0.149
})

// 计算属性
const isExpired = (expireTime?: string) => {
  if (!expireTime) return false
  return new Date(expireTime) < new Date()
}

const getTimeRemaining = (expireTime: string) => {
  const now = new Date()
  const expire = new Date(expireTime)
  const diff = expire.getTime() - now.getTime()

  if (diff <= 0) return '0天'

  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

  if (days > 0) return `${days}天`
  return `${hours}小时`
}

const getShareTypeText = (type: string) => {
  const types = {
    public: '公开',
    private: '私密',
    family: '家庭'
  }
  return types[type] || type
}

const getRoleText = (role: string) => {
  const roles = {
    admin: '管理员',
    member: '成员',
    viewer: '访客'
  }
  return roles[role] || role
}

const formatDate = (date: string | Date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

const getPreviewMedia = (share: any) => {
  // 模拟获取分享中的媒体预览
  return [
    { id: 1, thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=100&h=100&fit=crop', name: 'image1.jpg' },
    { id: 2, thumbnail: 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=100&h=100&fit=crop', name: 'image2.jpg' },
    { id: 3, thumbnail: 'https://images.unsplash.com/photo-1601758228041-f3b2795255f1?w=100&h=100&fit=crop', name: 'image3.jpg' }
  ].slice(0, 3)
}

const isOnline = (member: any) => {
  // 模拟在线状态检测
  return Date.now() - new Date(member.lastActiveTime).getTime() < 5 * 60 * 1000 // 5分钟内活跃
}

// 事件处理
const openCreateShare = () => {
  selectedMediaForShare.value = [] // 可以从其他组件传入选中的媒体
  showCreateShareModal.value = true
}

const closeCreateShareModal = () => {
  showCreateShareModal.value = false
  selectedMediaForShare.value = []
}

const closePermissionModal = () => {
  showPermissionManager.value = false
}

const closeInviteModal = () => {
  showInviteModal.value = false
}

const copyShareLink = async (share: any) => {
  try {
    await navigator.clipboard.writeText(share.shareUrl)
    Message.success('分享链接已复制到剪贴板')
  } catch (error) {
    Message.error('复制链接失败')
  }
}

const editShare = (share: any) => {
  // 编辑分享设置
  router.push(`/media/share/edit/${share.id}`)
}

const viewShareStats = (share: any) => {
  // 查看分享统计
  router.push(`/media/share/stats/${share.id}`)
}

const toggleShare = async (share: any) => {
  try {
    await updateShareSettings(share.id, {
      isEnabled: !share.isEnabled
    })
    share.isEnabled = !share.isEnabled
    Message.success(share.isEnabled ? '分享已启用' : '分享已禁用')
  } catch (error) {
    Message.error('操作失败')
  }
}

const deleteShare = async (share: any) => {
  if (!confirm('确定要删除此分享链接吗？此操作不可撤销。')) {
    return
  }

  try {
    await deleteShareLink(share.id)
    shareList.value = shareList.value.filter(s => s.id !== share.id)
    Message.success('分享链接已删除')
  } catch (error) {
    Message.error('删除失败')
  }
}

const approveRequest = async (request: any) => {
  try {
    await approveAccess(request.id)
    accessRequests.value = accessRequests.value.filter(r => r.id !== request.id)
    Message.success('已批准访问请求')
  } catch (error) {
    Message.error('操作失败')
  }
}

const rejectRequest = async (request: any) => {
  try {
    await rejectAccess(request.id)
    accessRequests.value = accessRequests.value.filter(r => r.id !== request.id)
    Message.success('已拒绝访问请求')
  } catch (error) {
    Message.error('操作失败')
  }
}

const editMemberPermissions = (member: any) => {
  // 编辑成员权限
  router.push(`/media/share/member/${member.id}/permissions`)
}

const removeMember = async (member: any) => {
  if (!confirm(`确定要移除成员 ${member.name} 吗？`)) {
    return
  }

  try {
    await removeFamilyMember(member.id)
    familyMembers.value = familyMembers.value.filter(m => m.id !== member.id)
    Message.success('成员已移除')
  } catch (error) {
    Message.error('操作失败')
  }
}

const onShareCreated = (share: any) => {
  shareList.value.unshift(share)
  closeCreateShareModal()
  Message.success('分享链接已创建')
}

const onMemberInvited = (member: any) => {
  familyMembers.value.push(member)
  closeInviteModal()
  Message.success('邀请已发送')
}

// 数据加载
const loadShares = async () => {
  try {
    const response = await getMyShares({
      status: shareFilter.status,
      shareType: shareFilter.type
    })
    if (response.code === 200) {
      shareList.value = response.data
    }
  } catch (error) {
    console.error('加载分享列表失败:', error)
  }
}

const loadFamilyMembers = async () => {
  try {
    const response = await getFamilyMembers()
    if (response.code === 200) {
      familyMembers.value = response.data
    }
  } catch (error) {
    console.error('加载家庭成员失败:', error)
  }
}

const loadAccessRequests = async () => {
  try {
    const response = await getAccessRequests({ status: 'pending' })
    if (response.code === 200) {
      accessRequests.value = response.data
    }
  } catch (error) {
    console.error('加载访问请求失败:', error)
  }
}

const loadAnalytics = () => {
  // 模拟分析数据加载
  console.log('Loading analytics for:', analyticsTimeRange.value)
}

// 初始化
onMounted(() => {
  loadShares()
  loadFamilyMembers()
  loadAccessRequests()

  // 模拟数据
  shareList.value = [
    {
      id: 'share_001',
      title: '2024年家庭旅行相册',
      mediaIds: [1, 2, 3, 4, 5],
      shareType: 'family',
      shareUrl: 'https://family.com/share/abcd1234',
      shortUrl: 'https://f.ly/abc123',
      expireTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
      allowDownload: true,
      allowComment: true,
      isEnabled: true,
      createTime: new Date('2024-01-15').toISOString(),
      creator: { id: 1, name: '张三', avatar: '' },
      statistics: { viewCount: 127, downloadCount: 23, commentCount: 8, likeCount: 45 }
    },
    {
      id: 'share_002',
      title: '宝宝成长记录',
      mediaIds: [6, 7, 8],
      shareType: 'private',
      shareUrl: 'https://family.com/share/efgh5678',
      shortUrl: 'https://f.ly/def456',
      allowDownload: false,
      allowComment: true,
      isEnabled: true,
      createTime: new Date('2024-01-10').toISOString(),
      creator: { id: 1, name: '张三', avatar: '' },
      statistics: { viewCount: 89, downloadCount: 0, commentCount: 12, likeCount: 67 }
    }
  ]

  familyMembers.value = [
    {
      id: 1,
      name: '张三',
      email: 'zhang@example.com',
      role: 'admin',
      joinTime: new Date('2023-01-01').toISOString(),
      lastActiveTime: new Date().toISOString(),
      permissions: {
        canUpload: true,
        canDownload: true,
        canShare: true,
        canDelete: true,
        canManageAlbums: true
      }
    },
    {
      id: 2,
      name: '李四',
      email: 'li@example.com',
      role: 'member',
      joinTime: new Date('2023-06-15').toISOString(),
      lastActiveTime: new Date(Date.now() - 2 * 60 * 1000).toISOString(),
      permissions: {
        canUpload: true,
        canDownload: true,
        canShare: false,
        canDelete: false,
        canManageAlbums: false
      }
    }
  ]

  accessRequests.value = [
    {
      id: 1,
      mediaId: 123,
      mediaTitle: '春节聚会照片',
      requesterId: 999,
      requesterName: '王五',
      requesterEmail: 'wang@example.com',
      message: '希望能看到春节聚会的照片',
      status: 'pending',
      createTime: new Date('2024-01-20').toISOString()
    }
  ]
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/glassmorphism.scss';

.media-share-view {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;

  .glass-card {
    @include glass-card;
    margin-bottom: 2rem;
  }

  .page-header {
    max-width: 1400px;
    margin: 0 auto 2rem;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2rem;

      .header-info {
        .page-title {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.75rem;
          font-weight: 700;
          color: white;
          margin: 0 0 0.5rem 0;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          svg {
            width: 28px;
            height: 28px;
            color: rgba(255, 255, 255, 0.8);
          }
        }

        .page-description {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.95rem;
          margin: 0;
        }
      }

      .header-actions {
        display: flex;
        gap: 1rem;

        .btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);

          svg {
            width: 16px;
            height: 16px;
          }

          &.btn-primary {
            background: rgba(59, 130, 246, 0.2);
            color: white;
            border-color: rgba(59, 130, 246, 0.3);

            &:hover {
              background: rgba(59, 130, 246, 0.3);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
            }
          }

          &.btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border-color: rgba(255, 255, 255, 0.2);

            &:hover {
              background: rgba(255, 255, 255, 0.2);
              transform: translateY(-2px);
            }
          }
        }
      }
    }
  }

  .share-overview {
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 2rem;

    .overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;

      .overview-item {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        backdrop-filter: blur(10px);

        .overview-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          svg {
            width: 24px;
            height: 24px;
            color: white;
          }

          &.shares {
            background: linear-gradient(135deg, #667eea, #764ba2);
          }

          &.views {
            background: linear-gradient(135deg, #f093fb, #f5576c);
          }

          &.downloads {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
          }

          &.members {
            background: linear-gradient(135deg, #43e97b, #38f9d7);
          }
        }

        .overview-content {
          flex: 1;

          h3 {
            color: white;
            font-size: 0.9rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            opacity: 0.9;
          }

          .overview-value {
            color: white;
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
          }

          .overview-change {
            font-size: 0.8rem;

            &.positive {
              color: #10b981;
            }

            &.neutral {
              color: rgba(255, 255, 255, 0.7);
            }

            &.negative {
              color: #ef4444;
            }
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;

    .content-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 2rem;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .shares-section,
  .members-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .share-filters,
  .share-list,
  .access-requests,
  .family-members,
  .share-analytics {
    @include glass-card;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 1.5rem 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        margin: 0;
      }

      .btn-text {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.8);
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0.5rem;
        border-radius: 8px;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
          color: white;
        }

        svg {
          width: 16px;
          height: 16px;
        }
      }

      .request-count {
        background: rgba(239, 68, 68, 0.2);
        color: #fca5a5;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
      }

      select {
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 0.9rem;

        option {
          background: #374151;
          color: white;
        }
      }
    }

    .card-content {
      padding: 1.5rem;
    }
  }

  .share-filters {
    .filters-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;

      .filter-group {
        label {
          display: block;
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
          margin-bottom: 0.5rem;
        }

        select {
          width: 100%;
          padding: 0.75rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          color: white;
          font-size: 0.9rem;

          &:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
          }

          option {
            background: #374151;
            color: white;
          }
        }
      }
    }
  }

  .share-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .share-item {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      &.expired {
        opacity: 0.6;

        &::before {
          content: '已过期';
          position: absolute;
          top: 1rem;
          right: 1rem;
          background: rgba(239, 68, 68, 0.2);
          color: #fca5a5;
          padding: 0.25rem 0.5rem;
          border-radius: 4px;
          font-size: 0.75rem;
        }
      }

      .share-preview {
        flex-shrink: 0;

        .media-thumbnails {
          position: relative;
          width: 80px;
          height: 80px;

          .thumbnail {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.2);

            &:nth-child(1) { top: 0; left: 0; }
            &:nth-child(2) { top: 10px; left: 10px; }
            &:nth-child(3) { top: 20px; left: 20px; }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .more-count {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 24px;
            height: 24px;
            background: rgba(59, 130, 246, 0.8);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
          }
        }
      }

      .share-info {
        flex: 1;
        min-width: 0;

        .share-title {
          color: white;
          font-size: 1rem;
          font-weight: 600;
          margin: 0 0 0.5rem 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .share-meta {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 0.75rem;

          .share-type {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;

            &.public {
              background: rgba(16, 185, 129, 0.1);
              color: #6ee7b7;
            }

            &.private {
              background: rgba(239, 68, 68, 0.1);
              color: #fca5a5;
            }

            &.family {
              background: rgba(59, 130, 246, 0.1);
              color: #93c5fd;
            }

            svg {
              width: 12px;
              height: 12px;
            }
          }

          .share-date,
          .share-expire {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
          }
        }

        .share-stats {
          display: flex;
          gap: 1rem;

          .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }
      }

      .share-actions {
        display: flex;
        gap: 0.5rem;

        .action-btn {
          width: 36px;
          height: 36px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          cursor: pointer;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
          }

          &.copy {
            color: #10b981;
            &:hover { background: rgba(16, 185, 129, 0.1); }
          }

          &.edit {
            color: #f59e0b;
            &:hover { background: rgba(245, 158, 11, 0.1); }
          }

          &.stats {
            color: #3b82f6;
            &:hover { background: rgba(59, 130, 246, 0.1); }
          }

          &.toggle.disabled {
            color: #6b7280;
            &:hover { background: rgba(107, 114, 128, 0.1); }
          }

          &.delete {
            color: #ef4444;
            &:hover { background: rgba(239, 68, 68, 0.1); }
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: rgba(255, 255, 255, 0.7);

      .empty-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          width: 32px;
          height: 32px;
          color: rgba(255, 255, 255, 0.5);
        }
      }

      h3 {
        color: white;
        font-size: 1.2rem;
        margin: 0 0 0.5rem 0;
      }

      p {
        margin: 0 0 2rem 0;
        font-size: 0.95rem;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: rgba(59, 130, 246, 0.2);
        color: white;
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 12px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(59, 130, 246, 0.3);
          transform: translateY(-2px);
        }
      }
    }
  }

  .request-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .request-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      .request-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .default-avatar {
          width: 100%;
          height: 100%;
          background: rgba(59, 130, 246, 0.2);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
        }
      }

      .request-info {
        flex: 1;

        .request-name {
          color: white;
          font-weight: 500;
          margin-bottom: 0.25rem;
        }

        .request-media {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
        }

        .request-time {
          color: rgba(255, 255, 255, 0.6);
          font-size: 0.8rem;
        }
      }

      .request-actions {
        display: flex;
        gap: 0.5rem;

        .btn {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          transition: all 0.2s ease;

          svg {
            width: 14px;
            height: 14px;
          }

          &.btn-success {
            background: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;

            &:hover {
              background: rgba(16, 185, 129, 0.3);
            }
          }

          &.btn-danger {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;

            &:hover {
              background: rgba(239, 68, 68, 0.3);
            }
          }
        }
      }
    }
  }

  .members-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .member-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      .member-avatar {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .default-avatar {
          width: 100%;
          height: 100%;
          background: rgba(59, 130, 246, 0.2);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 1.2rem;
        }

        .member-status {
          position: absolute;
          bottom: 2px;
          right: 2px;
          width: 12px;
          height: 12px;
          border: 2px solid white;
          border-radius: 50%;
          background: #6b7280;

          &.online {
            background: #10b981;
          }
        }
      }

      .member-info {
        flex: 1;

        .member-name {
          color: white;
          font-weight: 500;
          margin-bottom: 0.25rem;
        }

        .member-role {
          font-size: 0.8rem;
          padding: 0.25rem 0.5rem;
          border-radius: 12px;
          display: inline-block;
          margin-bottom: 0.5rem;

          &.admin {
            background: rgba(239, 68, 68, 0.1);
            color: #fca5a5;
          }

          &.member {
            background: rgba(59, 130, 246, 0.1);
            color: #93c5fd;
          }

          &.viewer {
            background: rgba(107, 114, 128, 0.1);
            color: #d1d5db;
          }
        }

        .member-permissions {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;

          .permission-tag {
            background: rgba(16, 185, 129, 0.1);
            color: #6ee7b7;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-size: 0.75rem;
          }
        }
      }

      .member-actions {
        display: flex;
        gap: 0.5rem;

        .action-btn {
          width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          cursor: pointer;
          color: rgba(255, 255, 255, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
          }

          &.delete {
            color: #ef4444;
            &:hover { background: rgba(239, 68, 68, 0.1); }
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

  .analytics-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;

    .metric-item {
      text-align: center;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      .metric-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
      }

      .metric-value {
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
      }
    }
  }

  .analytics-chart {
    .chart-placeholder {
      text-align: center;
      padding: 2rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      border: 2px dashed rgba(255, 255, 255, 0.2);

      p {
        color: rgba(255, 255, 255, 0.5);
        margin: 0;
      }
    }
  }
}

// 模态对话框样式
.create-share-modal,
.permission-modal,
.invite-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);

  .modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &.large {
      max-width: 800px;
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 2rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      h3 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
      }

      .modal-close {
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
          color: #1e293b;
        }

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }

    .modal-body {
      padding: 2rem;
      flex: 1;
      overflow-y: auto;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .media-share-view {
    .main-content .content-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .overview-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
  }
}

@media (max-width: 768px) {
  .media-share-view {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
      text-align: center;

      .header-actions {
        justify-content: center;
      }
    }

    .share-filters .filters-row {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    .share-item {
      flex-direction: column;
      gap: 1rem;
      text-align: center;

      .share-actions {
        justify-content: center;
      }
    }

    .analytics-metrics {
      grid-template-columns: 1fr;
    }

    .modal-content {
      width: 95%;
      margin: 1rem;

      .modal-header,
      .modal-body {
        padding: 1rem;
      }
    }
  }
}
</style>
